<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品列表</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 搜索 添加 -->
        <el-form :inline="true" style="margin-top: 20px;">
            <el-form-item>
                <el-button size="small" @click="exportExcel">导出Excel</el-button>
            </el-form-item>
            <el-form-item>
                <el-input size="small" v-model="searchname" placeholder="输入商品名称"></el-input>
            </el-form-item>
            <el-form-item>
                <!-- label="是否实体" -->
                <el-select size="small" v-model="isentity" placeholder="请选择是否实体">
                    <el-option v-for="item in options" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <!-- label="是否下架" -->
                <el-select size="small" v-model="isDisables" placeholder="请选择是否下架">
                    <el-option v-for="item in options1" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <!-- label="价格类型" -->
                <el-select size="small" v-model="priceTypes" placeholder="请选择积分类型">
                    <el-option v-for="item in options2" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-select size="small" v-model="categoryIdr" placeholder="请选择商品类别">
                    <el-option v-for="item in optionsType" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            </el-form-item>
            <el-form-item>
                <el-button size="small" type="primary" icon="el-icon-search" @click="chongzhi">重置</el-button>
            </el-form-item>
            <el-form-item>
                <el-button size="small" type="primary" icon="el-icon-plus" @click="openGoods()">添加</el-button>
            </el-form-item>
            <el-form-item>
                <el-button size="small" type="primary" icon="el-icon-user-solid" @click="OpenWX()">设置微信客服电话</el-button>
            </el-form-item>
        </el-form>

        <!-- 列表 -->
        <el-table size="small" ref="multipleTable" :data="GoodsData" highlight-current-row v-loading="loading" border
            element-loading-text="拼命加载中" style="width: 100%;" v-horizontal-scroll>
            <el-table-column align="center" sortable prop="sort" label="排序" width="100"></el-table-column>
            <el-table-column align="center" sortable prop="name" label="商品名" width="300"></el-table-column>
            <el-table-column align="center" sortable prop="categoryName" label="商品类别" width="120"></el-table-column>
            <el-table-column align="center" sortable prop="buyPrice" label="会员优惠价" width="120">
                <template slot-scope="scope">
                    <div>{{ scope.row.buyPrice / 100 }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" sortable prop="buyPoint" label="所需积分" width="100"></el-table-column>
            <el-table-column align="center" sortable prop="priceType" label="价格类型" :formatter="PriceType"
                width="120"></el-table-column>
            <el-table-column align="center" sortable prop="image" label="商品封面图" width="120">
                <template slot-scope="scope">
                    <el-image v-if="scope.row.image != ''" :src="scope.row.image" :preview-src-list="[scope.row.image]"
                        style="width: 80px;"></el-image>
                    <div v-if="scope.row.image == null">没有图片</div>
                </template>
            </el-table-column>
            <el-table-column align="center" sortable prop="entity" :formatter="isShiti" label="是否实体"
                width="120"></el-table-column>
            <el-table-column align="center" sortable prop="totalCount" label="商品总数" width="120"></el-table-column>
            <el-table-column align="center" sortable prop="saleCount" label="销量数量" width="120"></el-table-column>
            <el-table-column align="center" sortable prop="inventoryCount" label="库存" width="120"></el-table-column>
            <el-table-column align="center" sortable prop="isDisable" :formatter="isXiajia" label="是否下架"
                width="120"></el-table-column>
            <el-table-column align="center" sortable prop="postAddress" label="发货地址" width="120"></el-table-column>
            <el-table-column align="center" sortable prop="virtualPrice" label="产品原价" width="120">
                <template slot-scope="scope">
                    <div>{{ scope.row.virtualPrice / 100 }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" sortable prop="freight" label="运费" width="120">
                <template slot-scope="scope">
                    <div>{{ scope.row.freight / 100 }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" sortable prop="createTime" label="创建时间" width="140">
                <template slot-scope="scope">
                    <div>{{ transformDate(scope.row.createTime) }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" sortable prop="updateTime" label="更新时间" width="140">
                <template slot-scope="scope">
                    <div>{{ transformDate(scope.row.updateTime) }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="500" fixed="right">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="upGoodCount(scope.row)">修改商品库存</el-button>
                    <el-button size="mini" type="primary" @click="getGoodsxq(scope.row)">查看商品详情</el-button>
                    <el-button size="mini" type="primary" @click="openGoods(scope.row)">修改商品信息</el-button>
                    <el-button size="mini" type="danger" @click="deleGoods(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 修改库存 -->
        <el-dialog title="修改库存界面" :visible.sync="editFormUpCount" width="30%">
            <el-radio v-model="radio" label="1">增加库存</el-radio>
            <el-radio v-model="radio" label="0">减少库存</el-radio>
            <div style="display: flex;margin-top: 20px;margin-left: 20px; align-items: center;">
                <span>数&nbsp;&nbsp;量&nbsp;:&nbsp;</span><el-input style="width: 70%;" v-model="count"
                    placeholder="请输入数量"></el-input>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click='closeUpCount()'>取消</el-button>
                <el-button size="small" type="primary" :loading="loading" @click="upCount()"
                    v-if="radio == '1'">增加</el-button>
                <el-button size="small" type="danger" :loading="loading" @click="upCount()"
                    v-if="radio == '0'">减少</el-button>
            </div>
        </el-dialog>

        <!-- 编辑界面 -->
        <el-dialog :title="tit" :visible.sync="editFormVisiible" width="60%">
            <el-form label-width="120px">
                <el-form-item label="排序">
                    <el-input size="small" v-model="sort" auto-complete="off" placeholder="请输入排序"></el-input>
                </el-form-item>
                <el-form-item label="商品名">
                    <el-input size="small" v-model="name" auto-complete="off" placeholder="请输入商品名"></el-input>
                </el-form-item>
                <el-form-item label="商品类别">
                    <el-select v-model="categoryId" placeholder="请选择商品类别">
                        <el-option v-for="item in optionsType" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                    <el-form-item label="会员优惠价">
                        <el-input size="small" v-model="buyPrice" auto-complete="off" placeholder="请输入会员优惠价"></el-input>
                    </el-form-item>
                    <el-form-item label="所需积分">
                        <el-input size="small" v-model="buyPoint" auto-complete="off" placeholder="请输入所需积分"></el-input>
                    </el-form-item>
                    <el-form-item label="价格类型">
                        <el-select v-model="priceType" placeholder="请选择价格类型">
                            <el-option v-for="item in options2" :key="item.value" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="是否实体">
                        <el-select v-model="entity" placeholder="请选择是否实体">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="商品总数" prop="totalCount">
                        <el-input size="small" v-model="totalCount" auto-complete="off"
                            placeholder="请输入商品总数"></el-input>
                    </el-form-item>
                    <el-form-item label="库存" prop="saleCount">
                        <div v-if="tit == '修改'">
                            <el-input size="small" v-model="inventoryCount" auto-complete="off" placeholder="请输入商品库存"
                                :readonly="true"></el-input>
                        </div>
                        <div v-else>
                            <el-input size="small" v-model="inventoryCount" auto-complete="off"
                                placeholder="请输入商品库存"></el-input>
                        </div>
                    </el-form-item>
                <el-form-item label="销售数量" prop="saleCount">
                    <el-input size="small" v-model="saleCount" auto-complete="off" placeholder="请输入销售数量"></el-input>
                </el-form-item>
                <el-form-item label="是否下架">
                    <el-select v-model="isDisable" placeholder="请选择是否下架">
                        <el-option v-for="item in options1" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="发货地址" prop="postAddress">
                    <el-input size="small" v-model="postAddress" auto-complete="off" placeholder="请输入发货地址"></el-input>
                </el-form-item>
                <el-form-item label="商品原价" prop="virtualPrice">
                    <el-input size="small" v-model="virtualPrice" auto-complete="off" placeholder="请输入商品原价"></el-input>
                </el-form-item>
                <el-form-item label="运费" prop="freight">
                    <el-input size="small" v-model="freight" auto-complete="off" placeholder="请输入商品运费"></el-input>
                </el-form-item>
                <el-form-item label="商品封面图">
                    <div style="display: flex; align-items: center;">
                        <el-upload action="" :http-request="mainImgUpload" :show-file-list="false"
                            list-type="picture-card">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-image v-if="image != ''" :src="image" :preview-src-list="[image]"
                            style="width: 140px;height: 140px; margin-left: 14px;"></el-image>
                    </div>
                </el-form-item>
                <el-form-item label="商品轮播图">
                    <div style="display: flex;">
                        <el-upload action="" :http-request="mainImgUpload1" :show-file-list="false"
                            list-type="picture-card">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <ul style="" class="urlLun">
                            <li v-for="(url, index) in urlArr" :key="url"
                                style="width: 140px;height: 140px;margin:3px 0 3px 14px;  position:relative">
                                <el-image v-if="url != ''" :src="url" :preview-src-list="[url]"
                                    style="width: 140px;height: 140px;"></el-image>
                                <el-button class="deleUrl" type="danger" icon="el-icon-delete" circle
                                    @click="DeleUrl(index)"></el-button>
                            </li>
                        </ul>
                    </div>
                </el-form-item>
                <el-form-item label="商品介绍" prop="description" style="margin-top: -14px; height: 400px;">
                    <quill-editor v-model="description" :options="editorOption" style="height: 300px;"
                        ref="QuillEditor">
                    </quill-editor>
                    <!-- <el-input size="small" v-model="description" auto-complete="off" placeholder="请输入商品介绍"></el-input> -->
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click='closeDialog()'>取消</el-button>
                <el-button size="small" type="primary" :loading="loading" @click="addGoods()"
                    v-if="tit == '添加'">添加</el-button>
                <el-button size="small" type="primary" :loading="loading" @click="upGoods()"
                    v-if="tit == '修改'">修改</el-button>
            </div>
        </el-dialog>

        <!-- 查看详情 -->
        <el-dialog title="商品详情页：" :visible.sync="editFormDetails">
            <el-form label-width="120px">
                <el-form-item label="商品名：">
                    <span v-html="this.Details.name"></span>
                </el-form-item>
                <el-form-item label="商品类别：">
                    <span v-html="this.Details.categoryName"></span>
                </el-form-item>
                <el-form-item label="会员优惠价：">
                    <span v-html="this.Details.buyPrice / 100"></span>
                </el-form-item>
                <el-form-item label="所需积分：">
                    <span v-html="this.Details.buyPoint"></span>
                </el-form-item>
                <el-form-item label="价格类型：">
                    <span v-if="this.Details.priceType == 0">积分</span>
                    <span v-if="this.Details.priceType == 1">微信支付</span>
                    <span v-if="this.Details.priceType == 2">积分加微信支付</span>
                </el-form-item>
                <el-form-item label="商品封面图：">
                    <el-image v-if="this.Details.image != ''" :src="this.Details.image"
                        style="max-width: 100px;margin-left: 14px;" :preview-src-list="[this.Details.image]"></el-image>
                </el-form-item>
                <el-form-item label="商品轮播图：">
                    <ul style="display: flex; flex-wrap: wrap;overflow: auto; width: 100%;padding:0;margin:0;">
                        <li v-for="url in urlArr" :key="url" style="margin:3px 0 3px 14px">
                            <el-image v-if="url != ''" :src="url" style="max-width: 100px;"
                                :preview-src-list="[url]"></el-image>
                        </li>
                    </ul>
                </el-form-item>
                <el-form-item label="商品介绍：">
                    <div class="nav-description" v-html="this.Details.description"></div>
                </el-form-item>
                <el-form-item label="是否实体：">
                    <span v-if="this.Details.entity == 0">虚体</span>
                    <span v-if="this.Details.entity == 1">实体</span>
                </el-form-item>
                <el-form-item label="商品总数：">
                    <span v-html="this.Details.totalCount"></span>
                </el-form-item>
                <el-form-item label="销量数量：">
                    <span v-html="this.Details.saleCount"></span>
                </el-form-item>
                <el-form-item label="库存：">
                    <span v-html="this.Details.inventoryCount"></span>
                </el-form-item>
                <el-form-item label="是否下架：">
                    <span v-if="this.Details.isDisable == 0">未下架</span>
                    <span v-if="this.Details.isDisable == 1">已下架</span>
                </el-form-item>
                <el-form-item label="发货地址：" prop="price">
                    <span v-html="this.Details.postAddress"></span>
                </el-form-item>
                <el-form-item label="产品原价：" prop="price">
                    <span v-html="this.Details.virtualPrice / 100"></span>
                </el-form-item>
                <el-form-item label="运费：" prop="price">
                    <span v-html="this.Details.freight / 100"></span>
                </el-form-item>
                <el-form-item label="创建时间：" prop="createTime">
                    {{ transformDate(this.Details.createTime) }}
                </el-form-item>
                <el-form-item label="更新时间：" prop="updateTime">
                    {{ transformDate(this.Details.updateTime) }}
                </el-form-item>
            </el-form>
        </el-dialog>
        <!-- 富文本图片 -->
        <el-dialog title="选择图片" :visible.sync="uploadVisible" width="190px">
            <div>
                <div class="upload-demo">
                    <el-upload action="" :http-request="mainImgUpload3" :show-file-list="false"
                        list-type="picture-card">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </div>
            </div>
        </el-dialog>

        <!-- 编辑界面 -->
        <el-dialog title="设置微信客服电话" :visible.sync="editFormVisiibleWX" width="40%">
            <el-form label-width="120px">
                <el-form-item label="微信客服电话">
                    <el-input size="small" v-model="mobile" auto-complete="off" placeholder="请输入微信客服电话"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click='closeDialogWX()'>取消</el-button>
                <el-button size="small" type="primary" :loading="loading" @click="addWX()">添加</el-button>
            </div>
        </el-dialog>
        <!-- 分页组件 -->
        <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
    </div>
</template>

<script>
import {
    getCommodityList,
    getCommodityInfo,
    alterCommodityCount,
    addCommodity,
    deleteCommodity,
    upCommodity,
    getCommodityCategoryList,
    getAdminMobile,
    setAdminMobile
} from "../../api/userMG";
import client from "@/utils/ossClient.js";
import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver';
import Pagination from '../../components/Pagination'
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
// 工具栏配置
const toolbarOptions = [
    ["bold", "italic", "underline", "strike"], // toggled buttons
    ["blockquote", "code-block"],

    [{ header: 1 }, { header: 2 }], // custom button values
    [{ list: "ordered" }, { list: "bullet" }],
    [{ script: "sub" }, { script: "super" }], // superscript/subscript
    [{ indent: "-1" }, { indent: "+1" }], // outdent/indent
    [{ direction: "rtl" }], // text direction

    [{ size: ["small", false, "large", "huge"] }], // custom dropdown
    [{ header: [1, 2, 3, 4, 5, 6, false] }],

    [{ color: [] }, { background: [] }], // dropdown with defaults from theme
    [{ font: [] }],
    [{ align: [] }],
    ["link", "image", "video"], // 对于图片上传这是重点
    ["clean"], // remove formatting button
];
export default {
    data() {
        return {
            uploadVisible: false,
            GoodsData: [],
            loading: false,
            editFormVisiible: false,
            tit: '添加',
            options: [{
                value: 0,
                label: '虚体'
            }, {
                value: 1,
                label: '实体'
            }],
            options1: [{
                value: 0,
                label: '未下架'
            }, {
                value: 1,
                label: '已下架'
            }],
            options2: [{
                value: 0,
                label: '积分'
            }, {
                value: 1,
                label: '微信支付'
            }, {
                value: 2,
                label: '积分加微信支付'
            }],
            name: '',
            categoryName: '',
            buyPrice: '',
            buyPoint: '',
            priceType: '',
            image: '',
            url: '',
            description: '',
            entity: '',
            totalCount: '',
            saleCount: '',
            inventoryCount: '',
            isDisable: '',
            sort: '',
            postAddress: '',
            virtualPrice: '',
            freight: '',
            createTime: '',
            updateTime: '',
            urlArr: [],
            editFormDetails: false,
            Details: [],
            editFormUpCount: false,
            id: '',
            type: '',
            radio: '1',
            count: '',
            searchname: '',
            isentity: '',
            isDisables: '',
            priceTypes: '',
            categoryId: '',
            categoryIdr: '',
            editorOption: {
                modules: {
                    toolbar: {
                        container: toolbarOptions, // 工具栏
                        handlers: {
                            image: (value) => {
                                if (value) {
                                    // 在这里编写图片按钮点击操作
                                    this.uploadVisible = true;
                                    this.cursorIndex =
                                        this.$refs.QuillEditor.quill.getSelection().index;
                                } else {
                                    this.quill.format("image", false);
                                }
                            },
                        },
                    },
                },
            },
            optionsType: [],
            editFormVisiibleWX: false,
            mobile: '',
            // 分页参数
            pageparm: {
                currentPage: 1,
                pageSize: 20,
                total: 10
            },
            guige: 0,
            ruleValue: [],
            isshow: true,
            inputValues: {
                inputValue0: '',
                inputValue1: '',
                inputValue2: '',
                inputValue3: '',
                inputValue4: '',
                inputValue5: ''
            },
            releobject: {
                value: '',
                detail: ''
            },
            ruleshow: false,
            attr: [],
            ruleId: '',
            attrName: '',
            ruleName: '',
        }
    },
    // 注册组件
    components: {
        Pagination
    },
    created() {
        this.getData(1)
        this.gteTypeData()
    },
    methods: {
        // 立即生成
        create() {
            this.attr = []
            this.attr.push({
                attrName: this.attrName,
                attrValue: this.ruleValue,
                ruleId: this.ruleId
            })
            if (this.originalPrice == '') {
                this.originalPrice = '0'
            }
            if (this.price == '') {
                this.price = '0'
            }
            if (this.memberPrice == '') {
                this.memberPrice = '0'
            }
        },
        // 是否多规格
        guigeChange(val) {
            if (val == 1) {
                this.ruleId = ''
                this.guigeshow = true
                this.propshow1 = false
                this.ruleshow = true
            } else {
                this.ruleId = 0
                this.guigeshow = false
                this.propshow1 = true
                this.propshow = false
                this.ruleshow = false
                this.attr = []
                this.ruleValue = []
                this.guigeclect()
            }
        },
        // 单规格
        guigeclect() {
            if (this.originalPrice == '') {
                this.originalPrice = '0'
            }
            if (this.price == '') {
                this.price = '0'
            }
            if (this.memberPrice == '') {
                this.memberPrice = '0'
            }
            this.$http({
                url: this.$http.adornUrl2('/goods/onlyFormatAttr'),
                method: 'get',
                params: this.$http.adornParams({
                    'originalPrice': this.originalPrice,
                    'price': this.price,
                    'memberPrice': this.memberPrice,
                    'coverImg': this.coverImg,
                })
            }).then(({
                data
            }) => {
                if (this.isExpress == 2) {
                    for (var i in data.data.value) {
                        data.data.value[i].stock = 0
                    }
                }
                let returnData = data.data;
                this.headerData2 = returnData.header
                this.valueData2 = returnData.value

                this.propshow = false
                this.propshow1 = true
                this.sku = returnData.value
            })
        },
        deleterule(index) {
            this.ruleValue.splice(index, 1);
        },
        btnToclick() {
            this.isshow = false
            this.releobject.value = ''
            this.releobject.detail = ''
        },
        speciTotwo() {
            this.isshow = true
            this.releobject.value = ''
            this.releobject.detail = ''
        },
        speciTo() {
            if (this.releobject.value == '') {
                this.$message({
                    title: '提示',
                    type: 'error',
                    duration: 1800,
                    message: '请输入规格',
                    type: 'warning'
                });
                return
            }
            if (this.releobject.detail == '') {
                this.$message({
                    title: '提示',
                    duration: 1800,
                    type: 'error',
                    message: '请输入规格值',
                    type: 'warning'
                });
                return
            }
            this.ruleValue.push({
                value: this.releobject.value,
                detail: this.releobject.detail
            });
            this.isshow = true
            this.releobject.value = ''
            this.releobject.detail = ''
        },
        handleClose(tag, j, item) {
            var detailarr = item.detail.split(',')
            detailarr.splice(j, 1);
            if (detailarr.length < 1) {
                this.$message({
                    title: '提示',
                    type: 'error',
                    duration: 1800,
                    message: '规格值至少要有一个',
                    type: 'warning'
                });
                return
            } else {
                item.detail = String(detailarr)
            }
        },
        handleInputConfirm(index, item) {
            let inputValue = this.inputValues[index];
            if (inputValue) {
                var detailarr = item.detail.split(',')
                detailarr.push(inputValue)
                for (var i = 0; i < detailarr.length; i++) {
                    for (var j = 0; j < detailarr.length; j++) {
                        if (detailarr[i] == detailarr[j] && i != j) {
                            detailarr.splice(j, 1);
                        }
                    }
                }
                item.detail = String(detailarr)
                this.inputValues[index] = '';
            }
            this.inputVisible = false;
        },
        // 分页插件事件
        callFather(parm) {
            this.pageparm.page = parm.currentPage
            this.getData(parm.currentPage)
        },
        exportExcel() {
            let data = {
                name: this.searchname,
                entity: this.isentity,
                isDisable: this.isDisables,
                priceType: this.priceTypes,
                categoryId: this.categoryIdr,
                page: -2,
            }
            getCommodityList(data).then((res) => {
                this.loading = false;
                if (res.code == 200) {
                    this.GoodsData = res.data.list;
                    return;
                } else {
                    this.$Message({
                        type: "info",
                        message: res.msg
                    })
                }
            })
            setTimeout(() => {
                //转换成excel时，使用原始的格式
                var xlsxParam = { raw: true };
                let fix = document.querySelector(".el-table__fixed-right");
                let wb;
                //判断有无fixed定位，如果有的话去掉，后面再加上，不然数据会重复
                if (fix) {
                    wb = XLSX.utils.table_to_book(
                        this.$refs.multipleTable.$el.removeChild(fix), xlsxParam
                    );
                    this.$refs.multipleTable.$el.appendChild(fix);
                } else {
                    wb = XLSX.utils.table_to_book(this.$refs.multipleTable.$el, xlsxParam);
                }
                var wbout = XLSX.write(wb, {
                    bookType: "xls",
                    bookSST: true,
                    type: "array",
                });
                try {
                    // 如果是IE浏览器，使用Blob通过navigator.msSaveBlob保存
                    if (navigator.msSaveBlob) {
                        navigator.msSaveBlob(new Blob([wbout], { type: 'application/octet-stream' }), '商品列表.xlsx');
                    } else {
                        // 在其他浏览器中使用file-saver保存文件
                        saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '商品列表.xlsx');
                    }
                } catch (e) {
                    if (typeof console !== 'undefined') console.log(e, wbout);
                }
                return wbout;
            }, 1000);
            setTimeout(() => {
                this.getData(1)
            }, 2000);
        },
        // 获取WX
        getWX() {
            this.loading = true;
            getAdminMobile().then((res) => {
                this.loading = false;
                if (res.code != 200) {
                    this.$Message({
                        type: "info",
                        message: res.msg,
                    });
                } else {
                    this.mobile = res.data.data;
                    return;
                }
            })
        },
        // 打开WX编辑器
        OpenWX() {
            var userdata = JSON.parse(localStorage.getItem("userdata"))
            this.$prompt('请输入密码', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /^(?!(\s+$))/,
                inputErrorMessage: '不可以空数据提交!'
            }).then(({ value }) => {
                if (value === userdata.menuTwo) {
                    this.editFormVisiibleWX = true;
                } else {
                    this.$message({
                        type: 'error',
                        message: '密码错误'
                    });
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消输入'
                });
            });
        },
        addWX() {
            this.loading = true
            setAdminMobile({
                mobile: this.mobile
            }).then((res) => {
                this.loading = false;
                if (res.code == 200) {
                    this.editFormVisiibleWX = false
                    this.$message.success(res.msg)
                    this.getWX(1)
                } else {
                    this.editFormVisiibleWX = false
                    this.$message.error(res.msg);
                }
            })
        },
        // 关闭WX编辑对话框
        closeDialogWX() {
            this.editFormVisiibleWX = false
            this.$message({
                type: 'info',
                message: '已取消编辑'
            })
        },
        // 获取商品类别列表
        gteTypeData() {
            getCommodityCategoryList().then((res) => {
                this.loading = false;
                if (res.code != 200) {
                    this.$Message({
                        type: "info",
                        message: res.msg,
                    });
                } else {
                    res.data.list.forEach((item) => {
                        this.optionsType.push({ label: item.categoryName, value: item.id })
                    })
                    return console.log('this.optionsType', this.optionsType);;
                }
            })
        },
        mainImgUpload3(file) {
            var self = this;
            //判断扩展名
            const tmpcnt = file.file.name.lastIndexOf(".");
            const exname = file.file.name.substring(tmpcnt + 1);
            const names = ["jpg", "jpeg", "webp", "png", "bmp"];
            // if (names.indexOf(exname) < 0) {
            //   this.$message.error("不支持的格式!");
            //   return;
            // }
            const fileName = file.file.uid + "." + exname;
            client
                .put(fileName, file.file)
                .then((res) => {
                    if (res.url) {
                        console.log('res.url=======', res.url)
                        self.getUrl(res.url);
                    } else {
                        this.$message.error("文件上传失败");
                    }
                })
                .catch((err) => { });
        },

        getUrl(url) {

            this.uploadVisible = false;
            // 获取富文本组件实例
            let quill = this.$refs.QuillEditor.quill;
            // 如果上传成功
            if (url) {
                // 插入图片，res为服务器返回的图片链接地址

                quill.insertEmbed(this.cursorIndex, "image", url);
                // 调整光标到最后
                quill.setSelection(this.cursorIndex + 1);
            } else {
                // 提示上传失败信息
            }
        },
        // 重置数据
        chongzhi() {
            this.searchname = ''
            this.isentity = ''
            this.isDisables = ''
            this.priceTypes = ''
            this.categoryIdr = ''
            this.getData(1)
        },
        // 搜索数据
        search() {
            this.getData(1);
        },
        // 关闭修改对话框
        closeUpCount() {
            this.editFormUpCount = false
            this.$message({
                type: 'info',
                message: '已取消修改'
            })
        },
        upCount() {
            let data = {
                id: this.id,
                type: this.radio,
                count: this.count
            }
            alterCommodityCount(data).then((res) => {
                if (res.code == 200) {
                    this.editFormUpCount = false
                    this.$message.success(res.msg)
                    this.getData(this.pageparm.currentPage)
                    this.count = ''
                } else {
                    this.editFormUpCount = false
                    this.$message.error(res.msg);
                }
            })
        },
        // 打开修改库存编辑页
        upGoodCount(row) {
            var userdata = JSON.parse(localStorage.getItem("userdata"))
            this.$prompt('请输入密码', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /^(?!(\s+$))/,
                inputErrorMessage: '不可以空数据提交!'
            }).then(({ value }) => {
                if (value === userdata.menuTwo) {
                    this.editFormUpCount = true;
                    this.id = row.id;
                } else {
                    this.$message({
                        type: 'error',
                        message: '密码错误'
                    });
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消输入'
                });
            });
        },
        // 删除图片
        DeleUrl(index) {
            this.urlArr
            this.urlArr.splice(index, 1);
        },
        // 详情
        getGoodsxq(row) {
            this.loading = true;
            this.editFormDetails = true;
            let data = {
                id: row.id
            }
            getCommodityInfo(data).then((res) => {
                this.loading = false;
                console.log(res)
                if (res.code != 200) {
                    this.$Message({
                        type: "info",
                        message: res.msg
                    });
                } else {
                    this.Details = res.data.data;
                    this.urlArr = this.Details.url.split(',')
                    return;
                }
            })
        },
        // 添加
        addGoods() {
            this.loading = true
            this.buyPrice *= 100
            this.freight *= 100
            this.virtualPrice *= 100
            addCommodity({
                name: this.name,
                categoryId: this.categoryId,
                buyPrice: this.buyPrice,
                buyPoint: this.buyPoint,
                priceType: this.priceType,
                image: this.image,
                url: this.urlArr,
                description: this.description,
                entity: this.entity,
                totalCount: this.totalCount,
                saleCount: this.saleCount,
                postAddress: this.postAddress,
                inventoryCount: this.inventoryCount,
                virtualPrice: this.virtualPrice,
                isDisable: this.isDisable,
                freight: this.freight,
                sort: this.sort,
                createTime: '',
                updateTime: ''
            }).then((res) => {
                this.loading = false;
                if (res.code == 200) {
                    this.editFormVisiible = false
                    this.$message.success(res.msg)
                    this.getData(1)
                } else {
                    this.editFormVisiible = false
                    this.$message.error(res.msg);
                }
            })
        },
        // 修改
        upGoods() {
            this.loading = true
            this.buyPrice *= 100
            this.freight *= 100
            this.virtualPrice *= 100
            upCommodity({
                id: this.id,
                name: this.name,
                categoryId: this.categoryId,
                buyPrice: this.buyPrice,
                buyPoint: this.buyPoint,
                priceType: this.priceType,
                image: this.image,
                url: this.urlArr,
                description: this.description,
                entity: this.entity,
                totalCount: this.totalCount,
                saleCount: this.saleCount,
                postAddress: this.postAddress,
                virtualPrice: this.virtualPrice,
                isDisable: this.isDisable,
                freight: this.freight,
                sort: this.sort,
                createTime: this.createTime,
            }).then((res) => {
                this.loading = false;
                if (res.code == 200) {
                    this.editFormVisiible = false
                    this.$message.success(res.msg)
                    this.getData(this.pageparm.currentPage)
                } else {
                    this.editFormVisiible = false
                    this.$message.error(res.msg);
                }
            })
        },
        // 自定义上传方法 轮播的
        mainImgUpload1(file) {
            // 判断扩展名
            const tmpcnt = file.file.name.lastIndexOf(".");
            const exname = file.file.name.substring(tmpcnt + 1);
            const names = ["jpg", "jpeg", "webp", "png", "bmp"];
            if (names.indexOf(exname) < 0) {
                this.$message.error("不支持的格式!");
                return;
            }
            const fileName = file.file.uid + "." + exname;
            client
                .put(fileName, file.file)
                .then((res) => {
                    if (res.url) {
                        this.urlArr.push(res.url)
                    } else {
                        this.$message.error("文件上传失败");
                    }
                })
                .catch((err) => { });
        },
        // 自定义上传方法 图片的
        mainImgUpload(file) {
            // 判断扩展名
            const tmpcnt = file.file.name.lastIndexOf(".");
            const exname = file.file.name.substring(tmpcnt + 1);
            const names = ["jpg", "jpeg", "webp", "png", "bmp"];
            if (names.indexOf(exname) < 0) {
                this.$message.error("不支持的格式!");
                return;
            }
            const fileName = file.file.uid + "." + exname;
            client
                .put(fileName, file.file)
                .then((res) => {
                    if (res.url) {
                        console.log('url', res)
                        this.image = res.url
                    } else {
                        this.$message.error("文件上传失败");
                    }
                })
                .catch((err) => { });
        },
        // 关闭编辑对话框
        closeDialog() {
            this.editFormVisiible = false
            this.$message({
                type: 'info',
                message: '已取消编辑'
            })
        },
        // 打开编辑器
        openGoods(row) {
            var userdata = JSON.parse(localStorage.getItem("userdata"))
            this.$prompt('请输入密码', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /^(?!(\s+$))/,
                inputErrorMessage: '不可以空数据提交!'
            }).then(({ value }) => {
                if (value === userdata.menuTwo) {
                    this.editFormVisiible = true;
                    if (row != undefined && row != "undefined") {
                        this.tit = "修改";
                        this.id = row.id;
                        this.name = row.name;
                        this.categoryId = row.categoryId;
                        this.buyPrice = row.buyPrice / 100;
                        this.buyPoint = row.buyPoint;
                        this.priceType = row.priceType;
                        this.image = row.image;
                        this.urlArr = row.url.split(',');
                        this.description = row.description;
                        this.entity = row.entity;
                        this.totalCount = row.totalCount;
                        this.saleCount = row.saleCount;
                        this.inventoryCount = row.inventoryCount;
                        this.isDisable = row.isDisable;
                        this.sort = row.sort;
                        this.postAddress = row.postAddress;
                        this.virtualPrice = row.virtualPrice / 100;
                        this.freight = row.freight / 100;
                        this.createTime = row.createTime;
                        this.updateTime = row.updateTime;
                    } else {
                        this.tit = "添加";
                        this.sort = '';
                        this.name = '';
                        this.categoryId = '';
                        this.buyPrice = '';
                        this.buyPoint = '';
                        this.priceType = '';
                        this.image = '';
                        this.urlArr = [];
                        this.description = '';
                        this.entity = '';
                        this.totalCount = '';
                        this.saleCount = '';
                        this.postAddress = '';
                        this.inventoryCount = '';
                        this.virtualPrice = '';
                        this.freight = '';
                        this.isDisable = '';
                    }
                } else {
                    this.$message({
                        type: 'error',
                        message: '密码错误'
                    });
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消输入'
                });
            });
        },
        // 价格类型
        PriceType: function (row) {
            if (row.priceType == 0) {
                return "积分"
            } else if (row.priceType == 1) {
                return "微信支付"
            } else if (row.priceType == 2) {
                return "积分加微信支付"
            }
        },
        // 是否实体
        isShiti: function (row) {
            if (row.entity == 0) {
                return "虚体"
            } else if (row.entity == 1) {
                return "实体"
            }
        },
        // 是否下架
        isXiajia: function (row) {
            if (row.isDisable == 0) {
                return "未下架"
            } else if (row.isDisable == 1) {
                return "已下架"
            }
        },
        // 删除
        deleGoods(row) {
            var userdata = JSON.parse(localStorage.getItem("userdata"))
            this.$prompt('请输入密码', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /^(?!(\s+$))/,
                inputErrorMessage: '不可以空数据提交!'
            }).then(({ value }) => {
                if (value === userdata.menuTwo) {
                    this.$confirm('确定删除吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'error'
                    }).then(() => {
                        let data = {
                            id: row.id
                        }
                        deleteCommodity(data).then(res => {
                            if (res.code == 200) {
                                this.$message.success(res.msg)
                                this.getData(this.pageparm.currentPage)
                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                } else {
                    this.$message({
                        type: 'error',
                        message: '密码错误'
                    });
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消输入'
                });
            });
        },
        // 获取数据
        getData(page) {
            this.loading = true;
            let data = {
                name: this.searchname,
                entity: this.isentity,
                isDisable: this.isDisables,
                priceType: this.priceTypes,
                categoryId: this.categoryIdr,
                page: (page - 1) * 20,
            }
            getCommodityList(data).then((res) => {
                this.loading = false;
                if (res.code == 200) {
                    this.GoodsData = res.data.list;
                    this.pageparm.currentPage = page;
                    this.pageparm.total = res.data.count;
                    return;
                } else {
                    this.$Message({
                        type: "info",
                        message: res.msg
                    })
                }
            })
        }
    }

}
</script>

<style>
li {
    list-style: none;
}

.urlLun {
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
    width: 100%;
    height: 160px;
    padding: 0;
    margin: 0;
}

.deleUrl {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
}

.urlLun li:hover .deleUrl {
    display: block;
}

.nav-description {
    text-indent: 4ch;
    text-align: left;
    width: 100%;
}

.nav-description p {
    font-size: 16px;
    color: #666666;
    margin: 10px 0 20px;
}


.nav-description img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}
</style>